<template>
    <div id="tradeRes">
        <header-top :option="headerOption"></header-top>
        <div class="portfolio-learn step2">
            <div class="overview">
                <i class="iconfont icon-gougou"></i>
                <div>模拟交易已提交委托</div>
            </div>
            <div class="hbox">
                <div class="hbox-header">
                    <div class="col-1 hbox-header-item">股票名称</div>
                    <div class="col-b-2 hbox-header-item">提交委托时间</div>
                    <div class="col-3 hbox-header-item">买入数量</div>
                </div>
                <div class="hbox-row" v-for="(stock,index) in group" @click.stop.prevent="goDetails(stock)">
                    <div class="col-1 hbox-row-item">
                        <div class="stock_name">{{stock.stockName}}</div>
                        <span class="stock_code">{{stock.stockCode}}</span>
                    </div>
                    <div class="col-b-2 hbox-row-item">
                        <div class="commit_time">{{time}}</div>
                    </div>
                    <div class="col-3 hbox-row-item">
                        <span class="nVol">{{stock.buyNum}}</span>
                        <span>股</span>
                    </div>
                </div>
            </div>
            <div class="name_set show" v-if="tradeType == 'learn'">
                <span class="tag_name">组合名称</span>
                <span ref="myStealGroupName">
                    <span class="tag_orange">偷师</span>
                    <span class="portfolio_name">{{group_name}}</span>
                </span>
                <span class="set" @click.stop.prevent="setName"><i class="iconfont icon-huanmingzi"></i><span>修改</span></span>
            </div>
            <div class="niu"></div>
            <div class="trade-res-reason color-9 hbox">
                <div class="col" v-for="(item,index) in myReasons">
                    <i class="iconfont" :class="item.iconClass" data="item.icon"></i>
                    <span class="text-sm m-r-xs trade-res-reason-content">{{item.text}}</span>
                </div>
            </div>
            <div class="more_reason" @click.stop.prevent="chooseReason">更多原因<i class="iconfont icon-xiangyou"></i></div>
            <div class="submit" @click.stop.prevent="confirm">确认并查看委托</div>
            <div style="width:100%;height:20px"></div>
        </div>
        <group-set-name-modal></group-set-name-modal>
        <group-set-name-succ-modal></group-set-name-succ-modal>
    </div>
</template>

<script>
    import Constant from 'common/constant'
    import CommonUtil from 'common/common.util'
    import RemoteDAO from 'common/remoteDAO'
    import LocalDAO from 'common/localDAO'
    import HeaderTop from 'components/HeaderTop'
    import GroupSetNameModal from 'components/modal/GroupSetNameModal'
    import GroupSetNameSuccModal from 'components/modal/GroupSetNameSuccModal'
    export default {
        data () {
            return {
                headerOption: {
                    title: '',
                    leftBtn: Constant.leftBtn.BACK,
                    operations: [],
                    page:''
                },
                tradeType: '',
                group: [],
                group_name: '',
                group_id: '',
                entrust_no: '',
                time: '',
                client_id: '',
                islogin: false
            }
        },
        components: {
            HeaderTop,
            GroupSetNameModal,
            GroupSetNameSuccModal
        },
        computed: {
            myReasons () {
                var myReasons = this.$store.state.myReasons;
                if(myReasons.length == 0){
                    myReasons = Constant.BUY_DEFAULT_REASON;
                    for(let i=0;i<myReasons.length;i++){
                        var reason = myReasons[i];
                        reason['isActive'] = true;
                        reason['iconClass'] = Constant.REASON_ICON[reason.icon];
                    }
                }
                return myReasons;
            }
        },
        created () {
            this.initData()
        },
        methods: {
            //初始化数据
            initData() {
                var groupMessages = this.$store.state.groupMessages;
                this.tradeType = groupMessages.tradeType;
                if(this.tradeType == "build"){
                    this.headerOption.title = "组合模拟买入";
                    this.headerOption.page = Constant.page.BULID_GROUP_SUCC;
                }else{
                    this.headerOption.title = "偷师";
                    this.headerOption.page = Constant.page.LEARN_GROUP_SUCC
                }
                this.group = JSON.parse(groupMessages.group);
                this.group_name = groupMessages.group_name;
                this.group_id = groupMessages.group_id;
                this.entrust_no = groupMessages.entrust_no;
                this.time = CommonUtil.formatDateTime(new Date());
                this.client_id = LocalDAO.getUserCode();
            },

            //点击更多原因
            chooseReason () {
                this.$store.dispatch('setMyReasons',this.myReasons);
                this.$router.push({path:'/groupreason/reasonlist',query:{tradeType: this.tradeType}})
            },

            //点击股票行，跳转到原生详情页面
            goDetails (stock) {
                var stock_code = stock.stockCode;
                if (LocalDAO.getNickname()) {
                    this.islogin = true;
                }else{
                    this.islogin = false;
                }
                RemoteDAO.callStockLive(stock_code, "ordinary", this.islogin, function (data) {});
            },

            //点击确认并查看委托
            confirm () {
                var reason1 = '', reason2='', reason3='';
                if(this.myReasons.length == 0){
                    this.$store.dispatch('setTip',{text:'至少选择一条原因！'});
                    return;
                }
                for(let i=0;i<this.myReasons.length;i++){
                    var myReason = this.myReasons[i];
                    var icon = myReason.icon;
                    var text = myReason.text;
                    if(i == 0){
                        reason1 = icon + "|" + text
                    }else if(i == 1){
                        reason2 = icon + "|" + text
                    }else if(i == 2){
                        reason3 = icon + "|" + text
                    }
                }
                var param = {
                    "func_id": "11137",
                    "type":"zmq",
                    "client_id":this.client_id,
                    "entrust_no":this.entrust_no,
                    "entrust_type" : '2',
                    "entrust_typeid" : this.group_id,
                    "reason1" : reason1,
                    "reason2" : reason2,
                    "reason3" : reason3
                };
                RemoteDAO.callJCL11137(param,response => {
                    if(response.error == 0){
                        var decryptData = JSON.parse(decrypt.json2(response.data));
                        var body = decryptData.body || {};
                        if(body.status == "0"){
                            sessionStorage.setItem('fromRes', true);
                            this.$router.replace({path:'/trade/cancel',query:{menuFlag:"2"}});
                            this.$store.dispatch('setMyReasons',[])
                        }else{
                            this.$store.dispatch('setTip',{text:body.describe})
                        }
                    }else{
                        this.$store.dispatch('setTip',{text:response.data})
                    }
                });
            },

            //修改名称
            setName () {
                this.$store.dispatch('setModal', {visible: true, modalId: 'groupSetNameModal',groupId: this.group_id,callback: this.callback})
            },

            //修改名称成功后回调函数
            callback (response) {
                if(response.error == 0){
                    this.$refs.myStealGroupName.innerHTML = response.name
                }
            }
        }
    }
</script>
